<template>
  <div class="app-container">
    <div class="customContainer towSearchHeader">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-date-picker style="width:130px" v-model="pickerDate" value-format="yyyy-MM" type="month" format="yyyy-MM" :picker-options="pickerOptions"
            placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick" />
        </el-form-item>
      </el-form>
      <!-- 表格 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="序号" width="50">
          <template slot-scope="scope">
            <span class="indexColor">{{scope.$index+1+(currentPage-1)*20}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="收货方" prop="store_name"></el-table-column>
        <el-table-column align="center" label="预算金额" prop="budget_money" width="130"></el-table-column>
        <el-table-column align="center" label="订单金额" prop="order_money" width="130"></el-table-column>
        <el-table-column align="center" label="用款金额" prop="use_money" width="130"></el-table-column>
        <el-table-column align="center" label="预算采购差额" prop="b_o_money" width="130"></el-table-column>
        <el-table-column align="center" label="预算用款差额" prop="b_u_money" width="130"></el-table-column>
      </el-table>
      <el-table style="margin-top:5px" highlight-current-row :data="totalList" :show-header="false" border size="small">
        <el-table-column align="center" prop="name"></el-table-column>
        <el-table-column align="center" label="预算金额" prop="budget_money" width="130">
          <template slot-scope="scope">
            {{scope.row.budget_money|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="订单金额" prop="order_money" width="130">
          <template slot-scope="scope">
            {{scope.row.order_money|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="用款金额" prop="use_money" width="130">
          <template slot-scope="scope">
            {{scope.row.use_money|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="预算采购差额" prop="b_o_money" width="130">
          <template slot-scope="scope">
            {{scope.row.b_o_money|keepTwoNum}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="预算用款差额" prop="b_u_money" width="130">
          <template slot-scope="scope">
            {{scope.row.b_u_money|keepTwoNum}}
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>
<script>
import { getList, getPage, get_house_disbursement_list } from '@/api/report/budgetUseContForm';
import { pickerOptionsMonth } from '@/utils';
export default {
  data() {
    return {
      list: null,
      totalList: [
        {
          name: '总部',
          order_money: '',
          use_money: '',
          budget_money: '',
          b_o_money: '',
          b_u_money: ''
        }
      ],
      listLoading: false,
      formInline: {
        datetime: ''
      },
      pickerDate: new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth())).toISOString().slice(0, 7),
      pickerOptions: pickerOptionsMonth()
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (!vm.list) {
        vm.searchClick();
      }
    });
  },
  methods: {
    // 搜索
    searchClick() {
      if (!this.pickerDate) {
        this.$message.error('请选择月份');
        return;
      }
      this.formInline.datetime = this.pickerDate;
      this.fetchData();
    },
    // 列表获取
    getData(data) {
      data.forEach(val => {
        val.order_money = (val.purchase_money / 100).toFixed(2);
        val.use_money = (val.use_money / 100).toFixed(2);
        val.budget_money = (val.budget_money / 100).toFixed(2);
        val.b_o_money = (val.budget_money - val.order_money).toFixed(2); //预算与采购差额
        val.b_u_money = (val.budget_money - val.use_money).toFixed(2); //预算与用款差额
      });
      return data;
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      this.currentPage = 1;
      this.list = [];
      getPage(this.formInline)
        .then(response => {
          if (response.code == 1) {
            let total_data = response.data;
            this.totalList[0].order_money = total_data.purchase_money / 100;
            this.totalList[0].use_money = total_data.use_money / 100;
            this.totalList[0].budget_money = total_data.budget_money / 100;
            this.totalList[0].b_o_money = this.totalList[0].budget_money - this.totalList[0].order_money; //预算与采购差额
            this.totalList[0].b_u_money = this.totalList[0].budget_money - this.totalList[0].use_money; //预算与用款差额
            get_house_disbursement_list({ datetime: this.formInline.datetime, store_list: ['1'] }).then(res => {
              let resData = this.getData(res.data);
              this.list = this.list.concat(resData);
              if (resData.length > 0) {
                this.totalList[0].order_money += resData[0].order_money / 1;
                this.totalList[0].use_money += resData[0].use_money / 1;
                this.totalList[0].budget_money += resData[0].budget_money / 1;
                this.totalList[0].b_o_money += resData[0].b_o_money / 1;
                this.totalList[0].b_u_money += resData[0].b_u_money / 1;
              }
              this.listLoading = false;
            });
            getList({ datetime: this.formInline.datetime, store_list: total_data.store_list }).then(res => {
              let resData = this.getData(res.data);
              this.list = this.list.concat(resData);
              this.listLoading = false;
            });
          }
        })
        .catch(res => {
          this.listLoading = false;
        });
    }
  }
};
</script>